<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script src="/node_modules/art-template/lib/template-web.js"></script>
  <!-- 在浏览器端使用 axios 来发起Ajax请求 -->
  <script src="/node_modules/axios/dist/axios.min.js"></script>

  <script id="tmpl" type="text/template">
    {{ each message }}
    <tr>
      <td>{{ $value.id }}</td>
      <td>{{ $value.name }}</td>
      <td>{{ $value.gender }}</td>
      <td>{{ $value.ctime }}</td>
      <td>
        <a href="/info.html?id={{ $value.id }}">查看</a>
        <a href="/edit.html?id={{ $value.id }}">编辑</a>
        <a href="http://127.0.0.1:5000/api/delhero?id={{ $value.id }}" class="del">删除</a>
      </td>
    </tr>
    {{ /each }}
  </script>

  <script>
    $(function () {
      // 如果我要发送Ajax请求了    axios    是第三方的模块，它的作用，就是专门来发送Ajax请求的；
      // Jquery
      /* $.ajax({
        url: 'http://127.0.0.1:5000/api/getheros',
        type: 'get',
        dataType: 'json',
        success: function (data) {
          const htmlStr = template('tmpl', data)
          $('tbody').html(htmlStr)
        },
        error: function (err) {

        }
      }) */

      // axios 的使用语法
      // axios('请求的URL地址', { 发送给服务器的参数对象 }).then(成功的回调).catch(失败的回调)
      function loadList() {
        axios.get('http://127.0.0.1:5000/api/getheros').then(function (results) {
          // console.log(results)
          // 表示数据请求成功
          if (results.status === 200 && results.data.err_code === 0) {
            // console.log(results)
            const htmlStr = template('tmpl', results.data)
            $('tbody').html(htmlStr)
          } else {
            alert('请求数据列表失败！')
          }
        })
      }

      loadList()


      // 为什么要使用代理
      $('body').on('click', '.del', function (e) {
        e.preventDefault()

        const url = $(this).attr('href')
        axios(url).then(function (results) {
          // console.log(results)
          loadList()
        })
      })

    })
  </script>
</head>

<body>
  <div class="container">
    <h1>亡者农药
      <small>英雄管理器</small>
    </h1>
    <hr>

    <div class="clearfix">
      <a href="/add.html" class="btn btn-success pull-right">添加新英雄</a>
    </div>

    <table class="table table-striped">

      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>
</body>

</html>